import React, {Component} from 'react';
import {Image,
    TouchableOpacity,
    StyleSheet,
    View,
    ScrollView
} from 'react-native';
import {scaleSize} from '../../utils/screen';
import FontText from '../components/FontText';
import { i18n } from '../../i18n';
import SettingMain from './SettingMain';
import Hearder from './components/Hearder';
import { NavigationActions } from 'react-navigation';

export default class Settings extends Component {
    constructor(props){
        super(props);
        this.state = {
            settins:[
                {
                    icon:require("../../access/imgs/printer.png"),
                    label:i18n.t("settings.printer"),
                    routeName:"printer"
                },
                {
                    icon:require("../../access/imgs/printer.png"),
                    label:"Test",
                    routeName:"stest"
                }
            ],
            routeName:"printer"
        }
    }
    render() {
        let {settins,routeName} = this.state;
        return (
            <View 
                activeOpacity = {0.8}
                onPress = {()=>this.onPress()}
                style = {styles.box}>
                <View style = {styles.container}>
                    <View style = {styles.left}>
                        <View style = {styles.header}>
                            <Hearder title = {i18n.t("settings.title")} />
                        </View>
                        <ScrollView>
                            {
                                settins.map((item,index)=>{
                                    return (
                                        <TouchableOpacity
                                            onPress = {()=>this.changeTab(item.routeName)} 
                                            activeOpacity = {0.8}
                                            key = {`eval_${index}`} style = {styles.settingRow}>
                                            <Image source = {item.icon} style = {styles.settingIcon} />
                                            <View style = {{flex:1}}>
                                                <FontText font = {'book'} style = {styles.settingText}>{item.label}</FontText>
                                            </View>
                                            <Image source = {require("../../access/imgs/right_f.png")} style = {styles.settingArrow} />
                                        </TouchableOpacity>
                                    )
                                })
                            }
                        </ScrollView>
                    </View>
                    <View style = {styles.right}>
                        <SettingMain routeName = {routeName} />
                    </View>
                </View>
            </View>
        );
    }
    onPress(){
        let {onPress} = this.props;
        onPress && onPress();
    }
    changeTab(routeName){
        this.setState({
            routeName
        })
    }
}



const styles = StyleSheet.create({
    box:{
        flex:1,
        backgroundColor: "#fff",
    },
    container:{
        flex:1,
        flexDirection:"row"
    },
    header:{
        backgroundColor: "#fd265d",
        height:scaleSize(110),
        flexDirection: 'row',
    },
    backView:{
        width:scaleSize(200),
        paddingLeft: scaleSize(30),
        flexDirection:"row",
        alignItems:"center"
    },
    backText:{
        color:"#fff",
        fontSize:scaleSize(30),
        paddingLeft:scaleSize(9)
    },
    backIcon:{
        width:scaleSize(32),
        height:scaleSize(32),
    },
    title:{
        paddingRight:scaleSize(200),
        justifyContent:"center",
        alignItems:"center",
        flex:1
    },
    titleText:{
        color:"#fff",
        fontSize:scaleSize(30),
        fontWeight:"bold"
    },
    left:{
        width:scaleSize(640),
        backgroundColor: "#f2f2f2",
    },
    right:{
        flex:1,
        backgroundColor: "#fff",
        overflow:"hidden"
    },
    settingRow:{
        height:scaleSize(100),
        alignItems:"center",
        flexDirection:"row",
        paddingHorizontal:scaleSize(30),
        backgroundColor: "#fff",
        marginBottom:scaleSize(18)
    },
    settingIcon:{
        width:scaleSize(46),
        height:scaleSize(46)
    },
    settingText:{
        paddingHorizontal:scaleSize(18),
        color:"#333"
    },
    settingArrow:{
        width:scaleSize(30),
        height:scaleSize(30)
    }
})